<template>
  <div class="app-container">

    <u-page title="会员消费力">
      <el-alert
        title="查询方式"
        type="success"
        description="优先级：1.月份必填 2.部门选填（可多选或单选，不选择则全部查询）"
        :closable="false"
      />
      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="选择月份" prop="pickmonth">
            <el-date-picker
              v-model="listQuery.pickmonth"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择月"
            />
          </el-form-item>
          <el-form-item>
            <el-select v-model="listQuery.bmlist" multiple placeholder="请选择">
              <el-option
                v-for="item in deptList"
                :key="item.deptid"
                :label="item.deptname"
                :value="item.deptname"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
            <el-button type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      />

    </u-page>
  </div>
</template>
<script>
export default {
  data() {
    return {
      api: this.$u.api.DataPlanningmonthdata,
      deptList: [],
      nowyearmonth: '',
      lastyearmonth: '',
      // 表格
      columns: [
        {
          prop: 'ks',
          label: '课室',
          width: '120'
        },
        {
          prop: 'zgdm',
          label: '专柜代码',
          width: '100'
        },
        {
          prop: 'zgname',
          label: '专柜',
          width: '100'
        },
        {
          prop: 'sumje',
          label: '会员总业绩',
          width: '110'
        },
        {
          prop: 'bs',
          label: '交易笔数',
          width: '100'
        },
        {
          prop: 'custnos',
          label: '会员客数',
          width: '100'
        },
        /* {
          prop: 'bdj',
          label: '笔单价',
          width: '120'
        },*/
        {
          prop: 'kdj',
          label: '客单价',
          width: '110'
        },
        {
          prop: 'more2w',
          label: '2万（含）元以上',
          width: 120
        },
        {
          prop: 'fivekto2w',
          label: '5000（含）-2w',
          width: 120
        },
        {
          prop: 'onekto5k',
          label: '1000（含）-5000',
          width: 120
        },
        {
          prop: 'less1000',
          label: '1000（不含）以下',
          width: 130
        }
      ],
      list: [],
      listLoading: false,
      listOptions: {
        mutiSelect: true,
        stripe: true
      },
      listQuery: {
        page: 1,
        pageSize: 20,
        totalCount: 1,
        pickmonth: '',
        bmlist: []
      }
    }
  },
  created() {},
  mounted() {
    this.getDeptList()
  },
  methods: {
    // 加载部门
    getDeptList() {
      const self = this
      self.api.deptList().then(res => {
        this.deptList = res.data
      })
    },
    // 搜索事件
    handleFilter() {
      const self = this
      if (self.listQuery.pickmonth === '') {
        self.$message.warning('请选择时间！')
      }
      this.getTime()
      if (self.listQuery.pickmonth >= self.nowyearmonth) {
        self.$message.warning('请选择当月之前月份！')
      } else {
        this.hdlFilter()
      }
    },
    // 获取当前年月
    getTime() {
      const date = new Date() // Fri Oct 29 2021 16:37:56 GMT+0800 (CST)
      const nowyear = date.getFullYear() // 获取完整的年份(4位)
      let nowmonth = date.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
      let lastmonth = date.getMonth() // 获取当前月份(0-11,0代表1月)
      if (nowmonth < 10) {
        nowmonth = '0' + nowmonth
      }
      if (lastmonth < 10) {
        lastmonth = '0' + lastmonth
      }
      this.nowyearmonth = nowyear + '-' + nowmonth
      this.lastyearmonth = nowyear + '-' + lastmonth
    },
    /**
     * 查询事件
     */
    hdlFilter() {
      this.listQuery.page = 1
      this.hdlList()
    },
    /**
     * 获取列表数据
     */
    hdlList() {
      const self = this
      // 打开加载状态
      self.listLoading = true
      self.api.vipmonthlist(self.listQuery).then(res => {
        // 获取分页列表数据
        self.list = res.data.list
        // fix:修复ID重复的问题,设置table表格key值必须唯一
        self.list.forEach((item, index) => {
          self.list[index].index = index
        })
        // 获取分页数据,总页数
        self.listQuery.totalCount = res.data.totalCount
        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
    },
    // 导出数据
    handleDownload() {
      // 复制值
      const list = this.$u.deepClone(this.list)
      // 业务数据处理
      console.log(list)
      // 表头&表数据
      const tHeader = ['课室', '专柜代码', '专柜', '会员总业绩', '交易笔数', '会员客数', '客单价', '2万（含）元以上', '5000（含）-2w', '1000（含）-5000', '1000（不含）以下']
      const filterVal = ['ks', 'zgdm', 'zgname', 'sumje', 'bs', 'custnos', 'kdj', 'more2w', 'fivekto2w', 'onekto5k', 'less1000']
      const data = list.map(v => filterVal.map(j => { return v[j] }))
      const tiltle = this.nowyearmonth + '会员消费力月报'
      this.$u.exports.excel(tiltle, tHeader, data)
    }
  }
}
</script>
<style>
.el-select .el-input {
  width: 220px;
}
</style>
<style lang="scss" scoped>
.app-container{
  .item >>> .el-form-item__content {
    display: flex;
  }
  .status {
    ::v-deep{
      .el-input{
        width: 140px;
      }
    }
  }
  ::v-deep{
    .el-table-expand {
      font-size: 0;

      label {
        width: 90px;
        color: #99a9bf;
        font-size: 12px;
      }

      .el-form-item{
        margin-bottom: 2px;
        margin-right: 0;
        vertical-align: top;
      }

      .el-form-item__content {
        margin-right: 0;
        margin-bottom: 0;
        font-size: 12px;
        display: inline-block;
        vertical-align: top;
        position: relative;
      }
    }
  }
}
</style>
